<template>
  <div>
    <!-- 页面头部信息 -->
    <van-nav-bar
      title="找回密码"
      fixed
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #left>
        <van-icon name="arrow-left" size="22" />
      </template>
      <template #right>
        <van-icon name="wap-home-o" size="22" />
      </template>
    </van-nav-bar>
    <!-- 页面表单信息 -->
    <van-form @submit="onSubmit" class="myform">
      <van-field
        v-model="email"
        name="email"
        label="邮箱"
        placeholder="邮箱"
        :rules="[{ pattern: emailvalid, message: '请正确填写邮箱' }]"
      />
      <van-row>
        <van-col span="16">
          <van-field
            v-model="code"
            name="code"
            label="验证码"
            placeholder="输入6位验证码"
            validate-first
            @blur="verifycode"
            :rules="[{ pattern: codevalid, message: '验证码不对' }]"
          />
        </van-col>
        <van-col>
          <van-button round block type="info" size="normal" @click="sendValidCode">发送验证码</van-button>
        </van-col>
      </van-row>
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="设置密码"
        placeholder="设置密码"
        :rules="[{ pattern: pwdvalid, message: '密码不符合要求' }]"
      />

      <van-field
        v-model="repassword"
        type="password"
        name="password"
        label="重复密码"
        placeholder="重复密码"
        :rules="[{ validator: verify_repw, message: '前后密码不一致' }]"
      />
      <div style="margin: 16px;background-color:#fff;">
        <van-button round block type="info" native-type="submit" :disabled="!couldsubmit">提交</van-button>
      </div>
    </van-form>
    <!-- 前往登录链接 -->
    <van-row style="font-size:15px;">
      <van-col span="6" @click="toRegister">前往注册</van-col>
      <van-col span="12"></van-col>
      <van-col span="6" @click="toLogin">前往登录</van-col>
    </van-row>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'findPassword',
  data() {
    return {
      email: '',
      code: '',
      password: '',
      repassword: '',
      codevalid:/^[a-zA-Z0-9]{6}$/,
      emailvalid: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
      /**
       * 以字母开头，长度在6~18之间，只能包含字母、数字和下划线/^[a-zA-Z]\w{5,17}$/
       * 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
       */
      pwdvalid: /^[a-zA-Z]\w{5,17}$/,
      couldsubmit:false,
    }
  },
  methods: {
    ...mapMutations(['getCookie']),
    toRegister() {
      this.$router.push('/register')
    },
    toLogin() {
      this.$router.push('/login')
    },
    sendValidCode() {
      this.$http
        .get('/account/sendcode',{params:{email:this.email}})
        .then(res => {
          if (res.data.status === 200) {
            console.log(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 验证码验证
    verifycode() {
      this.$http
        .get('/account/validcode',{params:{email:this.email,code:this.code}})
        .then(res => {
          if (res.data.status === 200) {
            this.$dialog({message:res.data.msg})
            this.couldsubmit = true
          }
          else{
            this.couldsubmit = false
            this.$dialog({message:res.data.msg})
          }
        })
        .catch(err => {
          this.couldsubmit = false
          this.$dialog({message:res.data.msg})
        })
        return true
    },
    // 密码表单验证
    verify_repw(val) {
      return this.password === this.repassword
    },
    // 表单提交
    onSubmit(values) {
      axios
        .post('/account/findpassword', values)
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 头部左侧图标动作
    onClickLeft() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    },
    // 头部右侧图标点击动作
    onClickRight() {
      this.$router.push('/')
    }
  }
}
</script>
<style scoped>


</style>
